<template>
	<div class="siteBox" id="siteBox"  v-if="isShow">
    <header>
        <ul class="classify">
            <li :class="{active:isClassify===key}" v-for="(arr,key,index) in this.locationName" :key="index" @click="isClassify=key">
                <a class="classify-a" href="#">{{key}}</a>
            </li>
        </ul>
    </header>
    <main class="site-name">
        <dl v-for="value of isClassify">
            <dt>{{value}}</dt>
            <div class="list-dd">
                <dd v-for="(val,index) in locationName[isClassify][value]" :key="index" @click="site=val;isShow=false">
                    <a class="list-a" href="#">{{val}}</a>
                </dd>
            </div>
        </dl>
    </main>
</div>
</template>

<script>
// import AppHeader from './components/AppHeader'	
// import AppFooter from './components/AppFooter'	

export default{
methods:{
    getData(){
        let xhr = new XMLHttpRequest();                     //原生ajax
        xhr.open('get','http://127.0.0.1:3001/read');       //请求mock
        xhr.send();
        xhr.onreadystatechange = ()=> {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let locationN = JSON.parse(xhr.responseText);       //获取数据，地点json
                for (let key of Object.keys(locationN)) {           //遍历取出数据，取得键值
                    for(let key2 of Object.keys(this.locationName)){        //遍历data中locationName，为了分类
                        let pattern = new RegExp("["+key2.toString()+"]");      
                        if(pattern.test(key)){                              //正则匹配，如果找到就进入对应的分类对象中
                            
                            //判断该类中是否存在该字母这地名集合，如A，B，C
                            if (Array.isArray(this.locationName[key2][key.charAt(0)])) {
                                //如果存在则直接推入地名
                                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                                
                                //没有则先创建再推入地名
                            } else {
                                this.$set(this.locationName[key2],key.charAt(0),[]);
                                this.locationName[key2][key.charAt(0)].push(locationN[key]);
                            }
                            break;
                        }
                    }
                }
            }
        }
    },
}
}
</script>